{% extends "web/base.html" %}

{% block mainbody %}

    <div class="container">
        <div class="col-md-12">
            <div class="panel panel-danger">
                <div class="panel-heading">
                    <span class="glyphicon glyphicon-list-alt" aria-hidden="true"></span> 订 单 列 表
                    <a style="float:right" type="button" href="{% url 'orders' pIndex %}?status={{status}}" class="btn btn-warning btn-sm">刷 &nbsp; 新</a>
                </div>
                <table class="table table-striped">
                        <tr>
                            <th width="60">订单号</th>
                            <th>会员</th>
                            <th>操作员</th>
                            <th>金额</th>
                            <th>付款方式</th>
                            <th>收款渠道</th>
                            <th>支付状态</th>
                            <th>订单状态</th>
                            <th>下单时间</th>
                            <th>操作</th>
                        </tr>
                        {% for vo in odlist %}
                        <tr>
                            <td class="oid{{vo.id}}">{{vo.id}}</td>
                            <td>{% if vo.member_id == 0 %} 后台 {% else %} {{vo.member_id}} {% endif  %}</td>
                            <td>{{ vo.user_name }}</td>
                            <td class="price">{{vo.money}}</td>
                            <td>{% if vo.ptype == 1 %} 会员 {% else %} 收银员 {% endif %}  </td>
                            <td>{% if vo.bank == 1 %} 现金 {% elif vo.bank == 2 %} 支付宝 {% else %} 微信 {% endif %} </td> 
                            <td>{% if vo.payment_status == 1 %} 未支付{% elif vo.payment_status == 2 %} <span style="color:green">已支付</span> {% else %} 已退款 {% endif %}</td>
                            <td>{% if vo.status == 1 %} <span style="color:green">制作中</span> {% elif vo.status == 2 %} 无效 {% else %} <span style="color:red">已完成</span> {% endif %}</td>
                            <td>{{vo.create_at}}</td>
                            <td>
                                {% if vo.status == 1 %}
                                <button type="button" onclick="doShow({{vo.id}})" class="btn btn-warning btn-xs" role="button"><span class="glyphicon glyphicon-search" aria-hidden="true"></span> 详情</button> 
                                <button type="button" onclick="doChangeStatus({{vo.id}},3)" class="btn btn-info btn-xs" role="button"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> 完成</button> 
                                <button type="button" onclick="doChangeStatus({{vo.id}},2)" class="btn btn-danger btn-xs" role="button"><span class="glyphicon glyphicon-trash" aria-hidden="true"></span> 删除</button>
                                {% else %}
                                <button type="button" onclick="doShow({{vo.id}})" class="btn btn-warning btn-xs" role="button"><span class="glyphicon glyphicon-search" aria-hidden="true"></span> 详情</button> 
                                {% endif %}
                            </td>
                        </tr>
                        {% endfor %}
                </table>
                <div class="panel-footer" style="height:50px">
                    <div style="width:120px;float:left;margin:5px 0px;">合计订单：<span style="color:red;font-weight:bold;">{{plist|length}}</span> 页</div>
                    <nav aria-label="Page navigation" class="text-right">
                      <ul class="pagination" style="margin:0px;">
                        <li>
                          {% if pIndex == 1 %}{% else %} <a href="{% url 'orders' pIndex|add:-1 %}?status={{status}}" aria-label="Previous"><span aria-hidden="true">&laquo;</span>{% endif %}
                            
                          </a>
                        </li>
                        {% for pindex in plist %}
                        {%if pIndex == pindex %}<li class="active">{% else %} <li> {% endif %}<a href="{% url 'orders' pindex %}?status={{status}}">{{pindex}}</a></li>
                        {% endfor %}
                        <li>
                          {% if pIndex == plist|length %} {% else %} <a href="{% url 'orders' pIndex|add:1 %}?status={{status}}" aria-label="Next"><span aria-hidden="true">&raquo;</span>{% endif %}
                            
                          </a>
                        </li>
                      </ul>
                    </nav>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="myModalLabel">订单详情</h4>
          </div>
          <div class="modal-body">
            <table class="table table-hover">
                <tr>
                    <th>序号</th>
                    <th>菜品名称</th>
                    <th>单价</th>
                    <th>数量</th>
                    <th>小计</th>
                    <th>状态</th>
                    <th>操作</th>
                </tr>
                <tr>
                    <td>1</td>
                    <td>梅菜扣肉+番茄鸡蛋</td>
                    <td>25</td>
                    <td>2</td>
                    <td>50</td>
                    <td>正常</td>
                    <td><button>删除</button></td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>肉沫酸豆角</td>
                    <td>15</td>
                    <td>1</td>
                    <td>15</td>
                    <td>正常</td>
                    <td><button>删除</button></td>
                </tr>
                <tr>
                    <td>3</td>
                    <td>红烧肉</td>
                    <td>18</td>
                    <td>1</td>
                    <td>18</td>
                    <td>正常</td>
                    <td><button>删除</button></td>
                </tr>
            </table>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
          </div>
        </div>
      </div>
    </div>

{% endblock %}


{% block myjs%}
<script type="text/javascript">
function doShow(id){
    $.ajax({
        type:'get',
        url:"/web/orders/detail",
        dataType:'text',
        data:{oid:id},
        async: false,
        success:function(res){
            $("#myModal div.modal-body").empty().append(res);
            $('#myModal').modal({keyboard:false})
        },
    });
}

function doChangeStatus(id,s){
    var info = ["","","确定要删除订单吗？","确定要完成此订单吗？"];
    if(window.confirm(info[s])){
        $.get("/web/orders/status",{oid:id,status:s},function(data){
            if(data == "Y"){
                alert("tr.oid"+id)
                $("tr.oid"+id).remove();
                }else{
                    alert("订单处理失败！");
            }
        },'text');
    }
}
</script>
{% endblock %}